<template>
    <canvas id="myCanvas" width="1700" height="820" ref="cvs"></canvas>
</template>

<script lang="ts" setup>
import Circle from "@/features/basic-shape/Circle";
import Feature from "@/features/Feature";
import Rect from "@/features/basic-shape/Rect";
import { IPoint } from "@/Interface";
import { Utils } from "@/utils";
import { onMounted, ref } from "vue";
import { FontFamily } from "../Constants";
import GridSystem from "../GridSystem";

const cvs = ref(null);
let gls = ref<GridSystem | null>(null);

onMounted(() => {
    reset();
})

function reset(clear = false) {
    if (clear) localStorage.setItem("features", '');
    if (gls.value) {
        gls.value.destroy();
        gls.value = null;
    }
    let canvasDom = cvs.value as unknown as HTMLCanvasElement;
    const gridSys = new GridSystem(canvasDom);
    gridSys.initEventListener();
    gridSys.loadFont(FontFamily.SHISHANG);
    gridSys.draw(true)
    gls.value = gridSys;
    setSize(canvasDom);

    const rect = new Rect(50, 30, 100, 100);
    rect.fillStyle = rect.hoverStyle = rect.focusStyle = (ctx: CanvasRenderingContext2D) => {
        // 创建渐变
        const { leftTop, rightTop, rightBottom, leftBottom } = rect.getBboxSize();
        const lt = gls.value?.getPixelPos(leftTop) as IPoint;
        const rb = gls.value?.getPixelPos(rightBottom) as IPoint;
        const rt = gls.value?.getPixelPos(rightTop) as IPoint;
        const lb = gls.value?.getPixelPos(leftBottom) as IPoint;
        const midTop = Utils.getMidOfTwoPnts(lt, rt)
        const midBottom = Utils.getMidOfTwoPnts(lb, rb)
        const grd = ctx.createLinearGradient(midTop.x, midTop.y, midBottom.x, midBottom.y);
        grd.addColorStop(0, "red");
        grd.addColorStop(1, "white");
        return grd;
    }
    gls.value.addFeature(rect)

    const circle = new Circle(290, 130, 100);
    circle.fillStyle = circle.hoverStyle = circle.focusStyle = (ctx: CanvasRenderingContext2D) => {
        // 创建渐变
        const { leftTop, rightTop, rightBottom, leftBottom } = rect.getBboxSize();
        const lt = gls.value?.getPixelPos(leftTop) as IPoint;
        const rb = gls.value?.getPixelPos(rightBottom) as IPoint;
        const rt = gls.value?.getPixelPos(rightTop) as IPoint;
        const lb = gls.value?.getPixelPos(leftBottom) as IPoint;
        const r = Utils.getLenOfTwoPnts(lt, rt)/2
        const center = gls.value?.getPixelPos(Feature.getCenterPos(circle.pointArr)) as IPoint;

        const grd = ctx.createRadialGradient(center.x, center.y, 0, center.x, center.y, r*1);
        grd.addColorStop(0, "yellow");
        grd.addColorStop(1, "white");
        return grd;
    }
    circle.strokeStyle = 'transparent'
    gls.value.addFeature(circle)

}

function setSize(canvasDom: HTMLCanvasElement) {
    canvasDom.width = document.documentElement.clientWidth - 4;
    canvasDom.height = document.documentElement.clientHeight - 4;

    window.onresize = () => {
        canvasDom.width = document.documentElement.clientWidth - 4;
        canvasDom.height = document.documentElement.clientHeight - 4;
    }
}

</script>